<template>
	<div class="choose-ai-mode-conatiner" id="content-leftFirst">
		<p class="title">全局配置</p>
		<el-divider></el-divider>
		<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
			<el-tab-pane label="AI坐席属性" name="ai-property" class="ai-mode-global">
				<ChooseMode :showDetail="showDetail" @changeMode="changeMode" :resetNode="resetNode" ref="chooseMode" />
			</el-tab-pane>
			<el-tab-pane label="常规匹配" name="conventional" class="routine">
				<Conventional :showDetail="showDetail" />
			</el-tab-pane>
			<el-tab-pane label="人脸比对" name="faceCompare" class="face">
				<FaceCompare :showDetail="showDetail" />
			</el-tab-pane>
			<el-tab-pane label="活体检测" name="detectionLiving" class="face">
				<DetectionLiving :showDetail="showDetail" />
			</el-tab-pane>
			<p class="error-message" v-show="activeName === 'ai-property'">{{ errorMessage }}</p>
		</el-tabs>
		<div class="btn-box">
			<el-button :disabled="showDetail" @click="cancelSubmit">关闭</el-button>
			<el-button type="primary" @click="submitGlobalConf" :disabled="showDetail">确认</el-button>
		</div>
	</div>
</template>

<script>
import ChooseMode from './ChooseMode.vue';
import Conventional from './Conventional.vue';
import DetectionLiving from './DetectionLiving.vue';
import FaceCompare from './FaceCompare.vue';
import AIWorkflow from '@/modules/workFlow';
import _ from 'lodash';
import { getBusinessWorkflow } from '@/api/api.js';
export default {
	components: {
		ChooseMode,
		FaceCompare,
		Conventional,
		DetectionLiving
	},
	data() {
		return {
			activeName: 'ai-property',
			showDetail: AIWorkflow.isDetail,
			errorMessage: '',
			previousRobotProp: '', // 上次打开的AI全局配置，用来判断是否需要弹框切换AI清空话术
			previousRobotAudioType: '' // 上一次机器人选中的收音方式
		};
	},
	props: {
		resetNode: {
			type: Function
		},
		editBusinessId: {
			type: String,
			default: () => ''
		}
	},
	mounted() {
		if (AIWorkflow.getRobotProperty() && AIWorkflow.getRobotProperty().videoType) {
			this.previousRobotProp = _.cloneDeep(AIWorkflow.getRobotProperty().videoType);
			this.previousRobotAudioType = _.cloneDeep(AIWorkflow.getRobotProperty().audioType);
			console.log('previousRobotProp', this.previousRobotProp, this.previousRobotAudioType);
		}
	},
	methods: {
		handleClick(tab) {
			this.activeName = tab.name;
			this.errorMessage = '';
			AIWorkflow.setConfigTab(this.activeName);
		},
		submitGlobalConf() {
			console.log(AIWorkflow, 'select activeName', this.activeName);
			if (this.activeName === 'detectionLiving') {
				// 活体检测确定
				if (AIWorkflow.validateDetectLivingFace()) {
					this.$emit('submit', this.activeName);
				}
			} else if (this.activeName === 'faceCompare') {
				// 人脸对比确定
				if (AIWorkflow.validateFaceCompare()) {
					this.$emit('submit', this.activeName);
				}
			} else if (this.activeName === 'conventional') {
				// 常规配置确定
				this.$emit('submit', this.activeName);
			} else if (this.activeName === 'ai-property') {
				// ai属性确定
				const { videoType = '', silentVideo = null, talkingVideo = null, audioType = '' } = AIWorkflow.getRobotProperty();
				console.log('getRobotProperty', AIWorkflow.getRobotProperty(), silentVideo, talkingVideo);
				if (this.activeName === 'ai-property' && !videoType) {
					this.errorMessage = '* 请完善AI坐席属性';
					return;
				}
				if (videoType === 'pre-recorded-video' && !silentVideo) {
					this.errorMessage = '* 请选择静默视频';
					return;
				}
				if (videoType === 'video-switching') {
					if (!talkingVideo && !silentVideo) {
						this.errorMessage = '* 请选择静默视频以及播报视频';
						return;
					} else if (!silentVideo) {
						this.errorMessage = '* 请选择静默视频';
						return;
					} else if (!talkingVideo) {
						this.errorMessage = '* 请选择播报视频';
						return;
					}
				}
				this.errorMessage = '';
				// ai属性发生变化，提示弹框
				// 获取数据库最新的机器人属性模式
				console.log('#####editBusinessId', this.editBusinessId, videoType, audioType);
				console.log('isOldVersion:', AIWorkflow.isOldVersion);
				this.getWorkFlowDetail()
					.then(resp => {
						const { robotProperty = null } = resp;
						console.log(resp);
						if (!robotProperty || robotProperty.videoType !== videoType || robotProperty.audioType !== audioType || AIWorkflow.isOldVersion) {
							this.$refs.chooseMode.confirmChangeModal(this.previousRobotProp);
						} else {
							this.$emit('submit');
						}
					})
					.catch(error => {
						console.log('get detail error', error);
						this.$emit('submit');
					});
			}
		},
		//  获取业务场景详情
		getWorkFlowDetail() {
			return new Promise((resolve, reject) => {
				this.$Spin.show();
				let editBusinessId = this.$route.query.id;
				getBusinessWorkflow(editBusinessId)
					.then(resp => {
						console.log('getBusinessWorkflow : ', resp);
						this.$Spin.hide();
						if (resp.data && resp.data.workflow) {
							// const { compareFace = {}, detectLivingFace = {}, exceptionNext = null, videoMarks = {}, robotProperty = null } = resp.data.workflow;
							resolve(resp.data.workflow);
						} else {
							reject();
						}
					})
					.catch(error => {
						this.$Spin.hide();
						reject(error);
						console.log('getWorkFlowDetail error',error);
					});
			});
		},
		// 关闭按钮
		cancelSubmit() {
			this.$emit('cancelSubmit');
		},
		// 切换选择AI属性
		changeMode(val) {
			this.errorMessage = '';
			console.log('changeMode', val);
			this.$emit('changeMode', val);
		}
	}
};
</script>

<style lang="less">
.choose-ai-mode-conatiner {
	position: absolute;
	left: 100px;
	background-color: #fff;
	min-width: 280px;
	min-height: 100px;
	box-shadow: 0px 2px 22px 2px rgba(0, 0, 0, 0.08);
	z-index: 100;
	.el-tabs {
		padding: 10px;
	}
	.el-tabs__content {
		padding: 0 8px 40px;
	}
	.title {
		font-size: 14px;
		padding: 10px 20px 0;
		color: #333;
		font-weight: 600;
	}
	.el-divider {
		margin: 10px 0 0px;
	}
	.el-tabs--card > .el-tabs__header .el-tabs__item {
		border: 0;
	}
	.el-tabs--card > .el-tabs__header .el-tabs__nav {
		border: 0;
	}
	.el-tabs--card > .el-tabs__header {
		border: 0;
	}
	.el-tabs__item {
		padding: 0 12px;
		height: 30px;
		line-height: 30px;
	}
	.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
		background: #f4f7fb;
	}
	.btn-box {
		padding: 20px;
		text-align: right;
	}
	.error-message {
		color: #ef5753;
		margin-left: 100px;
	}
}
</style>
